<template>
  <div>
    <div style="margin-left: -4px; margin-right: -4px;">
      <div v-for="(item,index) in dataSource" :key="index" :class="stClass(dataSource)">
        <el-card class="oneCard">
          <div>
            <div>
              <!-- <h1>{{ item.total}}</h1> -->
              <el-link :type="item.totalColor" :underline="false">{{ item.total }}</el-link>
              <h2>{{ item.name }}</h2>
            </div>
            <div><svg-icon :icon-class="item.icon" /></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Card',
  components: {
    //
  },
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      //
    }
  },
  computed: {
    /* metricList() {
      const data = deepClone(this.cacheMonitorData) || {}
      const metrics = deepClone(this.metrics) || []
      metrics.forEach(element => {
        element['metricValue'] = data[element.metricCode] ? data[element.metricCode] : '-'
      })
      return metrics
    } */
  },
  methods: {
    cardLink(item) {
      this.$emit('on-cardLink', item)
    },
    stClass(dataSource) {
      return `st-block-${dataSource.length}`
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

@mixin st-block-mixin($denominator) {
  display: block;
  float: left;
  width: percentage(1 / $denominator);;
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box;
}

@for $i from 1 through 20 {
  .st-block-#{$i} {
    @include st-block-mixin($i)
  }
}

</style>
